<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta itemprop="name" content="" id="name"/>
	<meta itemprop="image" content="" id="image"/>
	<meta name="description" itemprop="description" content="" id="description"/>
    <title>{{ data['title'] }}</title>
	<link rel="stylesheet" type="text/css" href="http://g.alicdn.com/de/prismplayer/1.4.10/skins/default/index-min.css">
    <script src="http://g.alicdn.com/de/prismplayer/1.4.10/prism-min.js"></script>
    <style>
	*{margin:0;padding:0;}
	.clearfix:after{content: '';display: table;clear: both;}
	html {
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		line-height: 1.6;
	}
	body {
		-webkit-touch-callout: none;
		font-family: -apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
		background-color: #fff;
		line-height: inherit;
		max-width:7.5rem;
		margin-left:auto;
		margin-right:auto;
		color:#333;
		width:100%;
		font-size:0.3rem;
	}
	.share-wrapper{background:#f5f5f5;padding-bottom:0.2rem;}
	.share-header{position:fixed;top:0;width:100%;background:#fff;max-width:7.5rem;z-index:99998;   box-shadow: 0 0.02rem 0.02rem #eee;}
	.share-header-inner{padding:0.1rem 0.15rem;}
	.share-header-inner .left{width:0.8rem;position:absolute;top:0.1rem;left:0.15rem;}
	.share-header-inner .center{    padding: 0.08rem 2.5rem 0.08rem 1rem;font-size:0.28rem;line-height:1.2;}
	.share-header-inner .center img{width:0.6rem;}
	.share-header-inner .right{width:2.5rem;position:absolute;top:0.22rem;right:0.15rem;}
	.share-header-inner .left img{width:100%;vertical-align: middle;}
	.share-header-inner .right .word{color:#fff;background:#fd8348;border-radius:0.3rem;text-align:center;height:0.6rem;line-height:0.6rem;font-size:0.25rem;display:block;text-decoration: none;}
	.share-content{padding-top: 0;}
	.share-container{background:#fff;}
	.share-content-title{font-size:0.4rem;}
	.share-container .share-content-head{margin:0 0.2rem;margin-top:0.4rem;}
	.share-content-head{position:relative;margin-top:0.6rem;}
	.share-content-head .left{height:0.8rem;width:0.8rem;border-radius:0.8rem;overflow:hidden;position:absolute;top:0;left:0;}
	.share-content-head .left img{width:100%;height:100%;}
	.share-content-head .center{padding-left:1rem;}
	.share-content-head .center .name{font-size:0.28rem;}
	.share-content-head .center .time{font-size:0.24rem;color:#999;padding-right: 1rem;}
	.share-content-head .right{position:absolute;top:0.15rem;right:0;}
	.share-content-head .right span{display:block;height:0.48rem;line-height:0.48rem;color:#fff;background:#fd8348;border-radius:0.05rem;width: 1rem;text-align: center;font-size:0.24rem;}
	.share-content-article{padding:0.3rem;}
	.share-content-tag{background:#fff;margin-top:0.2rem;padding-bottom:0;}
	.share-content-tag span{padding:0.1rem 0.3rem;background:#fff;border:0.01rem solid #ccc;display:inline-block;margin-right:0.2rem;margin-bottom:0.2rem;border-radius:0.4rem;color:#666;font-size:0.24rem;}
	.share-footer{margin:0.2rem;margin-top:0.4rem;}
	.share-footer-comment-title{margin-top:0.2rem;font-size:0.3rem;border-left:0.06rem solid #ffcd55; padding-left:0.2rem;line-height:1;}
	.share-footer-comment-ul{list-style: none;margin-top:0.2rem;display:none;}
	.share-footer-comment-ul li{box-sizing: border-box;position: relative;border-radius: 4px;background-color: #fff;margin: 0rem 0 .1rem .3rem;padding: 0.3rem .2rem 0.25rem 0.55rem;}
	.share-footer-comment-ul li .head-img{position:absolute;top:0.45rem;left:-0.33rem;height:0.8rem;width:0.8rem;border-radius:0.66rem;overflow:hidden;}
	.share-footer-comment-ul li .head-img img{width:100%;height:100%;}
	.share-footer-comment-ul li .head{padding-right:0.5rem;position:relative;}
	.share-footer-comment-ul li .head .name{font-size: 0.24rem;}
	.share-footer-comment-ul li .head .time{font-size: 0.2rem;color:#999;}
	.share-footer-comment-ul li .head .like{position:absolute;top:0;right:0;font-size:0.28rem;color:#666;}
	.share-footer-comment-ul li .head .like img{width:0.32rem;margin-left:0.1rem;}
	.share-footer-comment-ul .content{font-size:0.28rem;}
	.share-content-tags{background:#fff;border-radius:0.05rem;padding:0.2rem;margin:0.2rem;}
	.share-code{text-align:center;margin-top:0.2rem;font-size:0.24rem;}
	.share-code .title{font-size:0.24rem;color:#fd8348}
	.share-code .img{width:3rem;height:3rem;margin:0.1rem auto;margin-top:0.4rem;}

	.share-content-article{font-size:0.3rem;}
	.share-content-article img,.share-content-article video,.share-content-article embed,.share-content-article iframe{max-width:100%;}
	.share-content-article li,.share-content-article ol{padding-left: 0.35rem;}
	blockquote{padding:0.2rem;}
	
	.share-video{margin-top:1rem;position:relative;z-index:999;font-size:0;}
	.share-video-info{margin:0.1rem 0;font-size:0.2rem;color:#999;}
	.share-video-info>div{display:inline-block;margin-right:0.2rem;}
	.share-video-info>div img{width:0.2rem;margin-right:0.1rem; vertical-align: middle;}
	
	.share-footer-tab{display:flex;margin:0.2rem 0;}
	.share-footer-tab>div{flex:auto;text-align:center;cursor: pointer;}
	.share-footer-tab>div span{padding:0 0.12rem;line-height:1;font-size:0.3rem;cursor: pointer;position:relative;}
	.share-footer-tab>div span.active{color:#fd6f48;}
	.share-footer-tab>div span.active:before{position: absolute;
		display: inline-block;
		margin-right: 0.1rem;
		width: 0.02rem;
		background: #fd6f48;
		height: 0.25rem;
		content: "";
		top: 0.06rem;
		left: 0;}
	
	.share-footer-video-ul{padding:0.1rem;display:flex;flex-wrap:wrap;background:#fff;list-style:none;color:#333;}
	.share-footer-video-ul li{flex:0 0 50%;}
	.share-footer-video-ul li a{padding:0.1rem;text-decoration: none;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;display:block;}
	.share-footer-video-ul .img{position:relative;}
	.share-footer-video-ul .img img{width:100%;height:2.06rem;}
	.share-footer-video-ul .img span{display:block;position:absolute;right:0.1rem;bottom:0.1rem;background-color: rgba(0,0,0,.6); border-radius: 0.18rem;padding: 0.02rem 0.18rem;color:#fff;font-size:0.2rem;}
	.share-footer-video-ul .title{font-size:0.28rem; padding: 0.15rem 0.1rem 0.25rem;color:#333;word-break:break-all;    height: 0.6rem;}
	.share-footer-video-ul .info{display:flex;justify-content:space-between;    padding: 0 0.1rem;}
	.share-footer-video-ul .info>div{flex:auto;color:#999;font-size:0.2rem;}
	.share-footer-video-ul .info>div img{width:0.3rem;margin-right:0.1rem;vertical-align:middle;position: relative;margin-top: -0.02rem;}
	.share-footer-video-ul .info>div.egg{color:#fea784;text-align:right;}
	video,img{max-width:100%;}
	video{height:4rem;object-fit: fill;display:block;}
	div[name="download"],span[name="download"]{cursor: pointer;}
	
	.share-open{background:rgba(0,0,0,0.8);color:#fff;position:fixed;top:0;left:0;right:0;bottom:0;font-size:0.4rem;display:none;cursor:pointer;z-index:99999;}
	.share-open .arrow{position:absolute;top:0.2rem;right:0.5rem;font-size:0.8rem;color:#fff;}
	.share-open .tip{text-align:center;margin-top:30%;color:#fff;}
	</style>
	<script>
	function adapt(designWidth, rem2px){
	  var d = window.document.createElement('div');
	  d.style.width = '1rem';
	  d.style.display = "none";
	  var head = window.document.getElementsByTagName('head')[0];
	  head.appendChild(d);
	  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
	  d.remove();
	  var w=window.innerWidth>750?750:window.innerWidth;
	  document.documentElement.style.fontSize = w / designWidth * rem2px / defaultFontSize * 100 + '%';
	  var st = document.createElement('style');
	  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
	  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
	  st.innerHTML = portrait + landscape;
	  head.appendChild(st);
	  return defaultFontSize
	};
	var defaultFontSize = adapt(750, 100);
	</script>




</head>
<body>
<body>
<div class="share-wrapper">
	<div class="share-header">
		<div class="share-header-inner clearfix">
			<div class="left">
				<img src="<?php echo STATIC_URL; ?>/App/img/logo.png?v=1507617633406" alt="">
			</div>
			<div class="center">
				<div><img src="<?php echo STATIC_URL; ?>/App/img/logofont.png?v=1507617633406" alt=""></div>
				<div>主播还能更好玩！</div>
			</div>
			<div class="right">
				<a id="openApp" class="word" name="download">打开app观看</a>
			</div>
		</div>
	</div>
	<div class="share-video">
		<div id='J_prismPlayer' class='prism-player'></div>
	</div>
	<div class="share-content">
		<div class="share-content-tags">
			<div class="share-content-title">{{ data['title']}}</div>
			<div class="share-video-info">
				<div><img src="<?php echo STATIC_URL; ?>/App/img/icon_riqi@3x.png?v=1507617633406" alt=""/><span>{{ date('m-d H:i',data['createTime'])}}</span></div>
				<div><img src="<?php echo STATIC_URL; ?>/App/img/icon_shipplay@3x.png?v=1507617633406" alt=""> <span id="viewCount">0</span></div>
				<div><img src="<?php echo STATIC_URL; ?>/App/img/icon_spxiaoxi@3x.png?v=1507617633406" alt=""> <span id="barrageCount">0</span></div>
			</div>
			<div class="share-content-head">
				<div class="left"><img src="{{data['authorImg']}}" alt=""></div>
				<div class="center">
					<div class="name">{{ data['author']}}</div>
					<div class="time">{{ data['sign'] }}</div>
				</div>
				<div class="right">
					<span name="download">+关注</span>
				</div>
			</div>
			<div class="share-content-tag">
				{% for label in data['label'] %}
				<span> {{ label['name']}}</span>
				{% endfor %}
			</div>
		</div>
		
	</div>
	<div class="share-footer">
		<div class="share-footer-tab">
			<div onclick="shareVideoShow()"><span class="active" id="aboutVideo">相关视频</span></div>
			<div onclick="shareCommentShow()"><span id="aboutComment">最新评论</span></div>
		</div>
		<ul class="share-footer-video-ul" id="shareVideoUl">
		{% for related in data['relatedVideo'] %}
			<li>
				<a href="{{ related['shareUrl'] }}">
					<div class="img"><img src="{{ related['thumb'] }}" alt=""><span>{{ related['duration'] }}</span></div>
					<div class="title">{{ related['title']|cutStr}}</div>
					<div class="info">
						<div><img src="<?php echo STATIC_URL; ?>/App/img/i_view1.png" alt=""/><span>{{ related['viewCount']}}</span></div>
						<div class="egg"><img src="<?php echo STATIC_URL; ?>/App/img/icon_haowampiao_me@2x.png?v=1507617633406" alt=""> <span>{{ related['ticketCount']}}</span></div>
					</div>
				</a>
			</li>
		{% endfor %}	
		</ul>
		<ul class="share-footer-comment-ul" id="shareCommentUl">
			
		</ul>
	</div>
	<div class="share-code">
		<div class="title" id="shareMore" name="download">更多视频，请在客户端看 ></div>
		<div class="img"><img id="qrcode" src="<?php echo STATIC_URL; ?>/App/img/downloadQRCode.png?v=1507617633406" alt=""></div>
		<div id="qrcodeWord">扫一扫或长按二维码，下载app</div>
	</div>
	<div class="share-open" id="shareOpen">
		<div class="arrow">↗</div>
		<div class="tip">请在浏览器中打开</div>
	<div>
</div>
<script>
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var isWechart=/MicroMessenger/i.test(u);
var isQQ=/Mobile MQQBrowser/i.test(u);
var isWeiBo=/WeiBo/i.test(u);
if(isIOS){
	var downloads=document.getElementsByName("download");
	for(var i=0;i<downloads.length;i++){
		(function(i){
			downloads[i].addEventListener("click",function(){
				location.href="http://img.mini.oss.houw.com/share-download.html?id=<?php echo $data['id'];?>&categoryId=<?php echo $data['categoryId'];?>";	
			});
		})(i)
	}
}
if(isAndroid){
	var param={
		id:"<?php echo $data['id'];?>",
		categoryId:"<?php echo $data['categoryId'];?>"
	}
	var downloads=document.getElementsByName("download");
	for(var i=0;i<downloads.length;i++){
		(function(i){
			downloads[i].addEventListener("click",function(){
				if(isWechart || isQQ || isWeiBo){
					document.getElementById("shareOpen").style.display="block";
					//document.getElementById("J_prismPlayer").style.display="none";
				}else{
					location.href="gejiapp://jp.app/openwith?"+JSON.stringify(param);
					var time=Date.now();
					setTimeout(function(){
						if(Date.now()-time<1200){
							location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.heniaokeji.geji";
						}
					},1000)
				}
			});
		})(i)
	}
	document.getElementById("shareOpen").addEventListener("click",function(){
		document.getElementById("shareOpen").style.display="none";
		//document.getElementById("J_prismPlayer").style.display="block";
	});
}
if(isWechart){
	document.getElementById("qrcode").src="<?php echo STATIC_URL; ?>/App/img/weixinQRcode.png?v=1507617633406";
	document.getElementById("qrcodeWord").innerText="扫一扫或长按二维码，关注公众号";
}
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
	var aboutVideo=document.getElementById("aboutVideo");
	var aboutComment=document.getElementById("aboutComment");
	var shareVideoUl=document.getElementById("shareVideoUl");
	var shareCommentUl=document.getElementById("shareCommentUl");
	var shareMore=document.getElementById("shareMore");
	var shareVideoShow=function(){
		aboutVideo.className="active";
		aboutComment.className="";
		shareVideoUl.style.display="flex";
		shareCommentUl.style.display="none";
		shareMore.innerHTML="更多视频，请在客户端看 >";
	}
	var shareCommentShow=function(){
		aboutVideo.className="";
		aboutComment.className="active";
		shareVideoUl.style.display="none";
		shareCommentUl.style.display="block";
		shareMore.innerHTML="更多评论，请在客户端看 >";
	}
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	if(isIOS){
		var h5video = '<video width="100%" controls playsinline webkit-playsinline><source type="application/vnd.apple.mpegurl" src="{{ data['videoUrl']}}">浏览器不支持HTML5视频<br>you browser DO NOT support HTML5 video<br></video>';
        document.getElementById("J_prismPlayer").innerHTML=h5video;
	}else if(isAndroid){
		var h5video = '<video width="100%" controls playsinline webkit-playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"><source type="application/x-mpegURL" src="{{ data['videoUrl']}}">浏览器不支持HTML5视频<br>you browser DO NOT support HTML5 video<br></video>';
        document.getElementById("J_prismPlayer").innerHTML=h5video;
		window.onresize = function(){
		  J_prismPlayer.style.width = window.innerWidth + "px";
		  //J_prismPlayer.style.height = "auto";
		}
	}else{
		new prismplayer({
			id: "J_prismPlayer",    // 容器id
			source: "{{ data['videoUrl']}}",  // 视频url 支持互联网可直接访问的视频地址
			autoplay: false,       // 自动播放
			width: "100%",        // 播放器宽度
			height: "4rem" ,     // 播放器高度
			playsinline:true
		});
	}
	
</script>
<script>
	window.onload=function(){
        //加载完毕后添加阅读数量，以及wxjssdk相关数据
        addArticleViewCount();
    };
    function getUrl(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
	function ajax(opt){
		opt = opt || {};
		opt.method = opt.method.toUpperCase() || 'POST';
		opt.url = opt.url || '';
		opt.async = opt.async;
		opt.data = opt.data || null;
		opt.success = opt.success || function () {};
		var xmlHttp = null;
		if (XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}else {
			xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
		}
		var params = [];
		for (var key in opt.data){
			params.push(key + '=' + opt.data[key]);
		}
		var postData = params.join('&');
		if (opt.method.toUpperCase() === 'POST') {
			xmlHttp.open(opt.method, opt.url, opt.async);
			xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
			xmlHttp.send(postData);
		}
		else if (opt.method.toUpperCase() === 'GET') {
			xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
			xmlHttp.send(null);
		} 
		if(opt.async){
			xmlHttp.onreadystatechange = function () {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					opt.success(xmlHttp.responseText);
				}
			};
		}else{
			if(xmlHttp.status == 200){
				opt.success(xmlHttp.responseText);
			}
		}
    
	}

    function addArticleViewCount() {
        var postUrl = "{{constant('APP_URL')}}" + "/web/ajaxAddWebViewCount";
        var id = "<?php echo $data['id'];?>";
        var categoryId = "<?php echo $data['categoryId'];?>";
        var authorId = "<?php echo $data['authorId'];?>";
        var source = 9;
        var readRate = 100;
        var isJump   = 0;
        var readTime = 0;
        var createTime = Date.parse(new Date())/1000;
        var endTime = 0;
        var shareUrl = window.location.href;

        var data = {
            'list': JSON.stringify([{"id":id,"categoryId":categoryId,"authorId":authorId,"source":source,"readRate":readRate,"isJump":isJump,"readTime":readTime,"createTime":createTime,"endTime":endTime}]),
			'url':encodeURIComponent(shareUrl)
        };
		ajax({
			method: 'POST',
			async:true,
			url: postUrl,
			data:data,
			success: function (res) {
			   res=JSON.parse(res);
			   switch(res.status){
					case 1:
						var data = res.hotCommentList;
						var str = ''
						for(var sj in data){
							str+='<li><div class="head-img"><img src="'+data[sj].userImg+'" alt=""></div><div class="head"><div class="name">'+data[sj].userName+'</div><div class="time">'+data[sj].createTime+'</div><div class="like"><span>'+data[sj].likeCount+'</span> <img src="<?php echo STATIC_URL; ?>/App/img/i_praise.png" alt=""></div></div><div class="content">'+data[sj].content+'</div></li>';
						}
						document.getElementById("shareCommentUl").innerHTML=str;
						document.getElementById("viewCount").innerText=res.viewCount || 0;
						document.getElementById("barrageCount").innerText=res.barrageCount || 0;
						wx.config({
							debug: false,
							appId: res.data.appId,
							timestamp: res.data.timestamp,
							nonceStr: res.data.nonceStr,
							signature: res.data.signature,
							jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ']
						});
						document.getElementById("name").setAttribute("content","<?php echo $data['title'];?>");
						document.getElementById("name").setAttribute("content","<?php echo $data['thumb'];?>?x-oss-process=image/resize,m_fixed,h_100,w_100");
						document.getElementById("description").setAttribute("content","<?php echo $data['title'];?>");

						wx.ready(function () {
							var id = getUrl('id');
							wx.onMenuShareAppMessage({
								title: "<?php echo $data['title'];?>", // 分享标题
								desc: "<?php echo $data['title'];?>", // 分享描述
								link: res.data.url, // 分享链接
								imgUrl: "<?php echo $data['thumb'];?>?x-oss-process=image/resize,m_fixed,h_100,w_100", // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function () {
									// 用户确认分享后执行的回调函数
								},
								cancel: function () {
									// 用户取消分享后执行的回调函数
								}
							});
							wx.onMenuShareTimeline({
								title: '<?php echo $data['title'];?>', // 分享标题
								link: res.data.url, // 分享链接
								imgUrl: '<?php echo $data['thumb'];?>?x-oss-process=image/resize,m_fixed,h_100,w_100', // 分享图标
								success: function () {
									// 用户确认分享后执行的回调函数
								},
								cancel: function () {
									// 用户取消分享后执行的回调函数
								}
							});
							wx.onMenuShareQQ({
								title: '<?php echo $data['title'];?>', // 分享标题
								desc: "<?php echo $data['title'];?>", // 分享描述
								link: res.data.url, // 分享链接
								imgUrl: '<?php echo $data['thumb'];?>?x-oss-process=image/resize,m_fixed,h_100,w_100', // 分享图标
								success: function () {
									// 用户确认分享后执行的回调函数
								},
								cancel: function () {
									// 用户取消分享后执行的回调函数
								}
							});
						});
						break;
					case 0:
						break;
				}
			}
		});
        return true;
    }
</script>
</body>